<template>
  <div id="container">
    <div class="header-wrap">
      <div class="header">
        <img :src="require('@/assets/img/xiaoyu.webp')" alt="" class="left" />
        <span class="center">课程大纲</span>
      </div>
    </div>
    <div class="section">
      <span class="section-left">已开课5节</span>
      <span class="section-right">课程有效期：2013-07-01</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {}
};
</script>
<style lang="scss" scoped>
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-wrap {
  width: 100%;
  height: 192.5px;
  background: url("../assets/img/train.webp") no-repeat;
  background-size: 375px 192.5px;
}
.header {
  width: 328px;
  height: 17px;
  margin-top: 33.5px;
  margin-left: 17px;
  margin-right: 30px;
  color: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  width: 7px;
  height: 10.5px;
}
.center {
  display: block;
  height: 17px;
  width: 51px;
  color: #ffffff;
  font-size: 11px;
  border: 2px #ffffff solid;
  line-height: 17px;
  border-radius: 4px;
}
.section {
  width: 345px;
  height: 20px;
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 11px;
  color: #666666;
  margin-top: 13px;
}
.section-left {
  display: block;
  width: 72px;
  height: 20px;
  background: #dfdfdf;
  border-radius: 11px;
  line-height: 20px;
}
.section-right {
  display: block;
  width: 156px;
  height: 20px;
  background: #dfdfdf;
  border-radius: 11px;
  line-height: 20px;
}
</style>
